<template>
	<div style="width: 1050px; margin: 0 auto; border: 1px #ccc solid">
		<div class="header">用户注册</div>
		<el-form
			:model="operateUser"
			:rules="checkOperateUser"
			ref="ruleForm"
			label-width="100px"
			style="width: 50%; margin: 0px auto"
			class="demo-ruleForm"
		>
			<el-form-item
				label="用户姓名"
				prop="name"
			>
				<el-input v-model="operateUser.name"></el-input>
			</el-form-item>
			<el-form-item
				label="手机号"
				prop="mobile"
			>
				<el-input v-model="operateUser.mobile"></el-input>
			</el-form-item>
			<el-form-item
				label="身份证号"
				prop="idCard"
			>
				<el-input v-model="operateUser.idCard"></el-input>
			</el-form-item>
			<el-form-item label="乘机人类型">
				<el-radio-group v-model="operateUser.passengerType">
					<el-radio :label="1">成人</el-radio>
					<el-radio :label="2">儿童</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item
				label="邮箱号"
				prop="mail"
			>
				<el-input
					type="email"
					v-model="operateUser.mail"
				></el-input>
			</el-form-item>
			<el-form-item
				label="邮箱验证码"
				prop="code"
			>
				<div style="display: flex">
					<el-input
						style="width: 220px;margin-right:10px"
						v-model="operateUser.code"
					></el-input>
					<el-button
						type="primary"
						@click="getCheckCode"
						v-show="canGetCode == true"
						style="width:300px"
					>点击获取验证码</el-button>
					<el-button
						type="primary"
						@click="getCheckCode"
						v-show="canGetCode == false"
						style="width:300px"
						disabled
					>{{time}}</el-button>
				</div>
			</el-form-item>
			<el-form-item
				label="密码"
				prop="password"
			>
				<el-input
					type="password"
					v-model="operateUser.password"
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					@click="register"
					class="btn"
				>注 册</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				operateUser: {},
				key: '',
				src: '',
				time: 30,
				canGetCode: true,
				checkOperateUser: {
					name: [
						{ required: true, message: "请输入用户姓名", trigger: "blur" },
					],
					mobile: [
						{ required: true, message: "请输入手机号", trigger: "blur" },
					],
					idCard: [
						{ required: true, message: "请输入身份证号", trigger: "blur" },
					],
					mail: [
						{ required: true, message: "请输入邮箱号", trigger: "blur" },
					],
					password: [
						{ required: true, message: "请输入用户密码", trigger: "blur" },
					],
					code: [
						{ required: true, message: "请输入验证码", trigger: "blur" },
					],
				},
			};
		},
		methods: {
			register() {
				this.$http.post("http://localhost/api/core/userInfo/register/" + this.operateUser.code, this.operateUser).then(res => {
					if (res.data.code == 0) {
						this.$message({
							message: res.data.message,
							type: 'success'
						});
						this.$router.push({ path: "/log" })
					} else {
						this.$message({
							message: res.data.message,
							type: 'error'
						});
					}
				})
			},
			getCheckCode() {//动态获取验证码
				this.canGetCode = false;
				this.$http.get("http://localhost/api/mail/send/" + this.operateUser.mail).then(res => {
					console.log(res);
					if (res.data.code == 0) {
						this.$message.success(res.data.message);
					} else {
						this.$message.error(res.data.message);
					}
				})
				let inval = setInterval(() => {
					if (this.time == 0) {
						this.canGetCode = true;
						this.time = 30;
						clearInterval(inval);
					} else {
						this.time--;
					}
				}, 1000)
			},
		},
	};
</script>

<style scoped>
	.header {
		background: #ccc;
		padding: 10px;
		color: red;
		margin-bottom: 40px;
	}

	.btn {
		width: 100% !important;
		font-size: 16px !important;
	}
</style>
